<template>
  <div class="navigation-container" :style="{ width: isCollapse ? '64px' : menuWidth + 'px' }">
    <div class="resize-handle" @mousedown="startResize"></div>
    <div class="menu-header">
      <div class="logo">
        <span v-if="!isCollapse" class="logo-text">简历管理系统</span>
        <span v-else class="logo-text-small">简</span>
      </div>
      <el-icon class="toggle-button" @click="toggleCollapse">
        <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>
    <el-scrollbar>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
        :collapse="isCollapse"
    mode="vertical"
        :collapse-transition="false"
        background-color="#1E1E2D"
        text-color="rgba(255, 255, 255, 0.7)"
        active-text-color="#ffffff"
    router
      >
        <div class="menu-section">
          <el-menu-item index="/employees">
            <el-icon><Document /></el-icon>
            <template #title>
              <span class="menu-title">简历管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/templates" disabled style="color: #bbb !important; background: #23233a !important;">
            <el-icon><Files /></el-icon>
            <template #title>
              <span class="menu-title">简历模板</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/contracts">
            <el-icon><Tickets /></el-icon>
            <template #title>
              <span class="menu-title">合同管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/certificates">
            <el-icon><Document /></el-icon>
            <template #title>
              <span class="menu-title">证书管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/reward-punishments">
            <el-icon><Tickets /></el-icon>
            <template #title>
              <span class="menu-title">奖惩管理</span>
            </template>
          </el-menu-item>
          <el-sub-menu index="system-settings">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span class="menu-title">系统管理</span>
            </template>
            <el-menu-item index="/certificate-names">
              <el-icon><Document /></el-icon>
              <template #title>
                <span class="menu-title">证书名称管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/dict-manage">
              <el-icon><Document /></el-icon>
              <template #title>
                <span class="menu-title">字典管理</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </div>
  </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Document, Files, Expand, Fold, Tickets } from '@element-plus/icons-vue'

export default {
  name: 'Navigation',
  components: {
    Document,
    Files,
    Expand,
    Fold,
    Tickets
  },
  setup() {
    const route = useRoute()
    const activeIndex = ref(route.path)
    const isCollapse = ref(false)
    const menuWidth = ref(240)
    const minWidth = 240
    const maxWidth = 400
    let isResizing = false

    watch(() => route.path, (newPath) => {
      activeIndex.value = newPath
    })

    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value
    }

    const startResize = (e) => {
      isResizing = true
      e.preventDefault()

      const startX = e.clientX
      const startWidth = menuWidth.value

      const handleMouseMove = (e) => {
        if (!isResizing) return
        const newWidth = startWidth + e.clientX - startX
        menuWidth.value = Math.min(Math.max(newWidth, minWidth), maxWidth)
      }

      const handleMouseUp = () => {
        isResizing = false
        document.removeEventListener('mousemove', handleMouseMove)
        document.removeEventListener('mouseup', handleMouseUp)
      }

      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    }

    onMounted(() => {
      const savedWidth = localStorage.getItem('menuWidth')
      const savedCollapse = localStorage.getItem('menuCollapse')
      
      if (savedWidth) {
        menuWidth.value = parseInt(savedWidth)
      }
      if (savedCollapse) {
        isCollapse.value = savedCollapse === 'true'
      }
    })

    watch([menuWidth, isCollapse], ([width, collapse]) => {
      localStorage.setItem('menuWidth', width)
      localStorage.setItem('menuCollapse', collapse)
    })

    return {
      activeIndex,
      isCollapse,
      menuWidth,
      toggleCollapse,
      startResize
    }
  }
}
</script>

<style scoped>
.navigation-container {
  position: relative;
  height: 100%;
  transition: all 0.3s ease;
  background-color: #1E1E2D;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.menu-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(to right, #2C2C40, #1E1E2D);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.logo {
  height: 32px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.logo-text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-family: 'Segoe UI', sans-serif;
}

.logo-text-small {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  font-family: 'Segoe UI', sans-serif;
}

.toggle-button {
  cursor: pointer;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  border-radius: 6px;
}

.toggle-button:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-section {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.el-menu-vertical {
  border-right: none;
  background-color: transparent !important;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 100;
}

.resize-handle:hover {
  background-color: rgba(54, 153, 255, 0.1);
}

:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

:deep(.el-menu) {
  border-right: none !important;
}

:deep(.el-menu-item) {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  margin: 4px 8px;
  padding: 0 16px !important;
  border-radius: 6px;
  transition: all 0.3s ease !important;
}

:deep(.el-menu-item.is-active) {
  background: linear-gradient(118deg, rgba(54, 153, 255, 0.2), rgba(137, 80, 252, 0.2)) !important;
  color: #ffffff !important;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

:deep(.el-menu-item .el-icon) {
  margin-right: 12px;
  font-size: 18px;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.menu-title {
  display: inline-block;
  vertical-align: middle;
  opacity: 1;
  transition: all 0.3s ease;
  font-weight: 500;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .navigation-container {
    width: 64px !important;
  }
  
  .resize-handle {
    display: none;
  }
  
  :deep(.el-menu-item) {
    margin: 4px;
    padding: 0 !important;
    justify-content: center;
  }
  
  :deep(.el-menu-item .el-icon) {
    margin: 0;
    font-size: 20px;
  }
  
  .menu-title {
    opacity: 0;
  }

  .menu-section-text {
    display: none;
  }
}

/* 滚动条样式 */
:deep(.el-scrollbar__bar.is-vertical) {
  width: 4px;
}

:deep(.el-scrollbar__thumb) {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

:deep(.el-scrollbar__thumb:hover) {
  background-color: rgba(255, 255, 255, 0.3);
}

:deep(.el-sub-menu .el-menu-item) {
  padding-left: 40px !important;
}
</style> 